@Entry
@Component
struct TestPage {

  build() {
    Column({ space: 50 }) {
      CounterComp()
      CounterComp()
    }
    .width('100%')
    .height('100%')
    .margin({ top: 50 })
  }
}

@Component
struct CounterComp {
  @State count: number = 0

  build() {
    Row() {
      Text('-')
        .textButton()
        .onClick(() => {
          this.count--
        })
      Text(this.count.toString())
        .padding(15)
      Text('+')
        .textButton()
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Extend(Text)
function textButton() {
  .fontSize(20)
  .backgroundColor('#CCCCCC')
  .width(32)
  .aspectRatio(1)
  .borderRadius(16)
  .textAlign(TextAlign.Center)
}
/*@Entry
@Component
struct TestPage {
  @State count: number = 0

  build() {
    Column({ space: 50 }) {
      // Prop 父传值给子
      CounterComp({ count: this.count })
      CounterComp({ count: this.count })
    }
    .width('100%')
    .height('100%')
    .margin({ top: 50 })
  }
}

@Component
struct CounterComp {
  @Prop @Require count: number

  build() {
    Row() {
      Text('-')
        .textButton()
        .onClick(() => {
          this.count--
        })
      Text(this.count.toString())
        .padding(15)
      Text('+')
        .textButton()
        .onClick(() => {
          this.count++
        })
    }
  }
}

@Extend(Text)
function textButton() {
  .fontSize(20)
  .backgroundColor('#CCCCCC')
  .width(32)
  .aspectRatio(1)
  .borderRadius(16)
  .textAlign(TextAlign.Center)
}*/

